<!--
  * 任务执行日志 员工
-->
<template>
  <div>
    <div class="header">
      <div>
        项目周报信息：
        <a-input style="width: 300px" v-model:value="queryForm.content" placeholder="输入项目周报信息" />
        周报日期：
        <a-range-picker @change="handleDateChange" v-model:value="handleDateArr" :ranges="defaultChooseTimeRange" style="width: 240px" />
        <a-button class="button-style" type="primary" @click="queryTaskDetail">搜索</a-button>
        <a-button class="button-style" type="default" @click="resetQueryTaskDetail">重置</a-button>
      </div>
    </div>
    <a-table
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      :pagination="false"
      rowKey="id"
      size="small"
      bordered
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button v-if="props.state===1 " @click="showUpdate(record)" v-privilege="'project:detail:edit'" type="link">编辑</a-button>
          </div>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageIndex"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="queryTaskDetail"
        @showSizeChange="queryTaskDetail"
        :show-total="showTableTotal"
      />
    </div>
    <ProjectDetailOperateModal ref="projectDetailOpertRef"  @refresh="queryTaskDetail" />
  </div>
</template>
<script setup lang="ts">
  import _ from 'lodash';
  import { reactive, ref, watch } from 'vue';
  import { projectApi } from '/@/api/task/project-api';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS, showTableTotal } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { defaultTimeRanges } from '/@/lib/default-time-ranges';
  import ProjectDetailOperateModal from './project-detail-operate-modal.vue';

  const props = defineProps({
    projectId: {
      type: String,
      default: null,
    },
    state: {
      type: String,
      default: null,
    },
  });

  defineExpose({
    queryTaskDetail,
  });

  const columns = reactive([
    {
      title: '记录周期',
      dataIndex: 'weekDateStr',
      width: 120,
    },
    {
      title: '变更内容',
      dataIndex: 'content',
      //width: 300,
    },
    {
      title: '项目进度(%)',
      dataIndex: 'presentRate',
      width: 100,
    },
    {
      title: '项目风险',
      dataIndex: 'riskDesc',
      width: 200,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 100,
    },
  ]);

  // --------------------------- 查询 ---------------------------

  const defaultQueryForm = {
    pageIndex: 1,
    pageSize: PAGE_SIZE,
    content: undefined,
    projectId:undefined,
    weekDateStart:undefined,
    weekDateEnd:undefined,
  };

  // 查询表单
  const queryForm = reactive({ ...defaultQueryForm });
  const total = ref(0);
  const tableData = ref([]);
  const tableLoading = ref(false);
  let projectDetailOpertRef=ref();
  const handleDateArr = ref([]);
  const defaultChooseTimeRange = defaultTimeRanges;

   // 时间变动
   function handleDateChange(dates, dateStrings) {
    queryForm.weekDateStart = dateStrings[0];
    queryForm.weekDateEnd = dateStrings[1];
  }


  function showUpdate(record){
    projectDetailOpertRef.value.showModal(record);
  }

  function resetQueryTaskDetail() {
    queryForm.content = '';
    queryTaskDetail();
  }

  async function queryTaskDetail() {
    try {
      tableLoading.value = true;
      queryForm.projectId = props.projectId;
      let res = await projectApi.detailPageQuery(queryForm);
      tableData.value = res.data.data;
      total.value = res.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  watch(
    () => props.projectId,
    (e) => {
      if (e) {
        queryTaskDetail();
      }
    },
    { immediate: true }
  );
</script>

<style scoped lang="less">
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }

  .button-style {
    margin: 0 10px;
  }
</style>
